//代运营页面-----详情页面
import React,{Component} from 'react'
import {Modal,Table,message,Button} from 'antd'
import $ from 'jquery';
import * as tools from '../../../tools/tools.js';
import './OperationDetails.css'

class OperationDetails extends Component{
  constructor(props){
    super(props)
    this.columns=[
      {
        title: '订单编号',
        dataIndex: 'trade_no',
        key: 'trade_no',
      },
      {
        title: '订单时间',
        dataIndex: 'pay_time',
        key: 'pay_time',
        render:(text)=><span>{new Date(text * 1000).toLocaleDateString()}</span>
      },
      {
        title: '订单金额',
        dataIndex: 'original_amount',
        key: 'original_amount',
      },
      {
        title: '代运营可提现金额',
        dataIndex: 'operationGeneration',
        key: 'operationGeneration',
      },
      {
        title: '商家可提现金额',
        dataIndex: 'Merchantcash',
        key: 'Merchantcash',
      },
      {
        title: '活动优惠金额',
        dataIndex: 'coupon_discount',
        key: 'coupon_discount',
      },
    ]
    this.state={
      Settlementvisible:false
    }
  }

  clickdetails=()=>{

  }

  pagechange=(pagination, filters, sorter)=>{  //换页时函数          ----这里有bug
      // $.ajax({
      //   type:'post',
      //   url: tools.apiUrl+'operation/settlement_info?page='+pagination.current,
      //   data:{
      //       token:localStorage.token
      //   },
      //   success:(res)=>{
      //       let data = res.result.data
      //       if(res.status ==1){
      //           let cTabContent = this.props.location.state.id ==29?this.tabDataFrom(data):false;
      //           this.setState({
      //               // marketdata:res.result.data,
      //               cTabContent
      //           })
      //       }else{
      //           message.error(res.msg)
      //       }
      //   }
      // })
  }

  OperationDetialcancel=()=>{
    this.props.onCancel(1);
}

redirectdata=(data)=>{    //重新更改data
  console.log(data)
  if(this.props.operationdata){
    return data.map(val=>{

      let operationGeneration = ((val.shop_profit-val.no_discount_amount)/100).toFixed(2);
      let Merchantcash = val.subsidy ==1?(val.no_discount_amount/100).toFixed(2):(val.no_discount_amount*(1-val.bank_service_percent)/100).toFixed(2)
      return{
        trade_no:val.trade_no,               //订单编号
        pay_time:val.pay_time,               //订单时间
        original_amount:(val.original_amount/100).toFixed(2),        //订单金额
        operationGeneration,    //代运营提现金额
        Merchantcash,           //商家提现金额
        coupon_discount:(val.coupon_discount/100).toFixed(2)         //活动优惠金额
      }
    })
  }
}

paymoney=(num)=>{        //点击打款信息获取
  tools.loginView(this).then(
    $.ajax({
      type:'post',
      url:tools.apiUrl+'operation/pay_info',
      data:{
        token:localStorage.token,
        id:num
      },
      success:(res)=>{
        if(res.status==1){
          console.log(res)
          this.setState({
            Settlementvisible:true,
            SettlementData:res.result
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
}
DetailsSettlement=(num)=>{     //点击结算
  tools.loginView(this).then(
    $.ajax({
      type:'post',
      url:tools.apiUrl+"operation/settlement_handle",
      data:{
        token:localStorage.token,
        id:num
      },
      success:(res)=>{
        if(res.status ==1){
          this.props.onCancel(2);
        }else{
          message.error(res.msg)
        }
      }
    })
  )
}
SettlementCancel=()=>{    
  this.setState({
    Settlementvisible:false
  })
}
SettlementOk=(num)=>{      //打款
  tools.loginView(this).then(
    $.ajax({
      type:'post',
      url:tools.apiUrl+'operation/pay_handle',
      data:{
        token:localStorage.token,
        id:num
      },
      success:(res)=>{
        console.log(res)
        if(res.status ==1){
          this.setState({
            Settlementvisible:false,
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
}

  render(){
    let dataSource = this.redirectdata(this.props.operationdata?this.props.operationdata.data:false);
    return(
      <Modal
      title="详情" 
      className="modal_box"
      visible={this.props.show}
      maskClosable={false}
      footer={null}
      onCancel={this.OperationDetialcancel}
      bodyStyle={{height:'700px',overflow: 'auto'}}
      >
        <div className="OperationDetails_box">
          <div>代运营可提现金额: {this.props.operationdata?(this.props.operationdata.cpunt_data.agent_profit/100).toFixed(2):0}元</div>
          <div>商家可提现金额: {this.props.operationdata?(this.props.operationdata.cpunt_data.shop_profit/100).toFixed(2):0}元</div>
          <div>活动优惠金额: {this.props.operationdata?(this.props.operationdata.cpunt_data.coupon_discount/100).toFixed(2):0}元</div>
        </div>
        <div style={{paddingLeft:'30px'}}>
          <Button type="primary" onClick={()=>this.DetailsSettlement(this.props.operationSid?this.props.operationSid:false)}>结算</Button>
          <Button type="primary" onClick={()=>this.paymoney(this.props.operationSid?this.props.operationSid:false)} style={{marginLeft:'30px'}}>打款</Button>
        </div>
        <Table
          columns={this.columns} 
          dataSource={dataSource}
          onChange={this.pagechange}
          scroll={{ x: 700 }}
          pagination={{showQuickJumper:true,total:this.props.operationdata?this.props.operationdata.page.last_page*10:false}}>
        >
        </Table>
        <Modal 
        title="结算金额"
        visible={this.state.Settlementvisible}
        onOk={()=>this.SettlementOk(this.props.operationSid?this.props.operationSid:false)}
        onCancel={this.SettlementCancel}>
          <div className="Operation_Settlement">
            <div>
              <div>
                将从商户账户提取:<strong style={{color:'red'}}>{this.state.SettlementData?(this.state.SettlementData.profit/100).toFixed(2):false}</strong>元
              </div>
              <div>
                到 {this.state.SettlementData?this.state.SettlementData.operate_account.cash_name:false}账户上
              </div>
            </div>
            <div>
              <div>姓名: {this.state.SettlementData?this.state.SettlementData.operate_account.cash_name:false}</div>
              <div>银行账号: {this.state.SettlementData?this.state.SettlementData.operate_account.cash_card:false}</div>
              <div>银行: {this.state.SettlementData?this.state.SettlementData.operate_account.cash_bank:false}</div>
              <div>银联号: {this.state.SettlementData?this.state.SettlementData.operate_account.bank_node:false}</div>
            </div>
          </div>
        </Modal>
      </Modal>
    )
  }
}
export default OperationDetails